<template>
  <div class="step-c">
    <div class="content">
      <div class="header">
        <div>车牌库</div>
        <el-button type="primary" @click="refreshPlate">换一批</el-button>
      </div>
      <el-alert
        v-show="msg"
        :title="msg"
        type="error"
      />
      <ul>
        <li v-for="(plate, idx) in plates" :key="idx">
          <el-button type="success" plain @click="selected(plate)">
            {{ plate }}
          </el-button>
        </li>

      </ul>
      <div class="foot">
        <el-button type="success" round>{{ selectedTemp }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { generatePlate } from '@/api/select/select'
export default {
  name: 'StepC',
  model: {
    prop: 'requestForm',
    event: 'selectedChange'
  },
  props: {
    // eslint-disable-next-line vue/require-default-prop
    requestForm: {
      type: Object
    }
  },
  data() {
    return {
      selectedTemp: '确 认 选 号',
      formTemp: this.requestForm,
      plates: [],
      msg: ''
    }
  },
  created() {
    this.generate()
  },
  methods: {
    generate() {
      generatePlate(this.formTemp.carplatefront).then(response => {
        if (response.status !== 200) {
          this.msg = response.msg
        } else {
          this.plates = response.data
        }
      }).catch(error => {
        console.log(error)
      })
    },
    refreshPlate() {
      this.generate()
    },
    selected(value) {
      this.formTemp.carplatefront = value
      this.selectedTemp = value
      this.$emit('selectedChange', this.formTemp)
    }
  }
}
</script>

<style scoped>
.step-c {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.step-c .content {
  margin: 20px;
  padding: 10px;
}
.step-c .content:hover {
  box-shadow: 0 2px 12px 4px rgba(0, 0, 0, 0.15);
}
.step-c .content .header {
  width: 620px;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.step-c .content ul {
  width: 620px;
  margin: 10px;
  padding: 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  list-style: none;
  border: 1px solid grey;
}
.step-c .content ul li {
  margin: 5px 10px;
}
.step-c .content ul li:hover {
  background-color: #40d9ff;
}
.step-c .content .foot {
  margin: 30px;
  display: flex;
  justify-content: center;
}
</style>
